<template>
    <div>
        <el-select v-if="type==1" v-model="sval"  :placeholder="placeholder" @change="changeData" :style="{width}" :disabled="disabled">
            <el-option v-for="dt in tableData" :key="dt.arObjectId" :label="dt.objectName" :value="dt.arObjectId" @click.native="item=dt"></el-option>
        </el-select>
        <div v-else @click="openDg">
            <el-input v-model="dgshowTxt" placeholder="请选择U3D物品" maxlength="50" type="text" class="headInput" :readonly="true"  :style="{width}" :disabled="disabled"/>
        </div>
     
     
        <my-teleport to="body" v-if="lkFlag">
            <my-dialog :show.sync="lkFlag" :showBtn="type==2" width="800px" title="请选择U3D物品" @confirm="getSelectData" @close="init"> 
                <div class="topscbox">
                    <div class="scinput">
                        <el-input placeholder="按物品名称搜索" v-model="keywords">
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input> 
                    </div>
                    <div class="tongbu">
                        <el-button size="mini" type="primary" plain @click="syncU3dData" :loading="btnLoading">同步</el-button>
                    </div>
                </div> 
                <my-table ref="tableEle" :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :showCheck="type==2" :sequence="true" :page='page' selectKey="arObjectId|objectName">
                    <el-table-column property="arObjectId" label="物品id" align='center' width="70px"></el-table-column>
                    <el-table-column property="objectName" label="物品名称" align='center'></el-table-column>
                    <el-table-column property="objectType" label="物品类型" align='center'></el-table-column>
                    <el-table-column property="" label="图片" align='center' width="80px">
                        <template slot-scope="scope">
                            <a v-if="scope.row.objectType=='simplePic'" :href="scope.row.objectUrl" class="yultp" target="_block">
                                <img :src="scope.row.objectUrl" alt="">
                            </a>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="type==3" prop="status" label="操作" align="center" width="100px">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" plain @click="dgSelectData(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </my-table>
            </my-dialog> 
        </my-teleport>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {
  getArobjectList,
  sync_u3d_data
} from '@/api/arApi'
import myDialog from '@/components/public/myDialog';
import myTable from '@/components/public/myTable';
import myTeleport from './myTeleport.vue';
import { reject } from 'q';
export default {
    props:{
        value:'',
        type:{  // 选择类型：1为select选择，2为弹窗多选、3为弹窗单选
            type:Number,
            default:1   
        },
        placeholder:{
            type:String,
            default:'请选择'
        },
        width:{
            type:String,
            default:'100%'
        },
        defaultTxt:String,
        disabled:{
            type:Boolean,
            default:false
        }
    },
    components:{
        myDialog,
        myTable,
        myTeleport
    },
    data(){
        return{
            dgshowTxt:'',
            lkFlag:false,
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            sval:'',
            keywords:'',
            btnLoading:false
        }
    },
    computed:{
        ...mapGetters({
            'goodsAddParams':'goods/goodsAddParams'
        })
    },
    created(){
        this.sval = this.value
        this.defaultTxt && (this.dgshowTxt = this.defaultTxt)
       // this.getList()
    },
    watch:{
        defaultTxt(n,o){
            this.dgshowTxt = n
        }
    },
    methods:{
        async getList(){
            this.loading = true
            return new Promise((resolve,reject) =>{
                const params = {
                    limit: this.type==1?1000:this.page.pageSize,
                    page: this.page.pageIndex,
                    objectName:this.keywords
                }
                getArobjectList(params).then(res=>{ // 获取地标
                    this.loading = false
                    this.tableData = res.data
                    this.page.total = res.total
                    resolve(res.data)
                }) 
                
            })  
        },
        async openDg(){
            if(this.disabled) return
            this.lkFlag=true
            await this.getList()
            // 设置表格默认选项
            this.$nextTick(()=>{
                if(this.value && this.tableData && this.tableData.length>0){
                    if(this.type ==2){ // 表格多选
                        this.tableData.forEach(row => {
                            if(this.value.indexOf(row.arObjectId)>-1){
                                this.$refs.tableEle.setRowSelection(row);
                            }
                        });
                    }else if(this.type ==3){ // 表格单选
                        this.tableData.forEach(row => {
                            if(this.value == row.arObjectId){
                                this.$refs.tableEle.setRowSelection(row);
                                //this.dgshowTxt = row.name
                            }
                        });
                    }
                }
            })
        },
        getSelectData(){
            this.lkFlag = false
            this.init()
        },
        init(){
            this.page.pageIndex = 1
            this.keywords = ''
        },
        tableSelect(obj,items){
           // console.log("obj:",obj)
           // console.log("items:",items)
           this.dgshowTxt = obj.objectName.join(',')
           this.$emit('input',obj.arObjectId)
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        changeData(val){
            this.$emit('input',val)
        },
        dgSelectData(item){
            this.dgshowTxt = item.objectName
            this.$emit('input',item.arObjectId)
            this.lkFlag = false
            this.init()
        },
        search(){
            this.page.pageIndex = 1;
            this.getList(); 
        },
        syncU3dData(){
            this.btnLoading = true
            sync_u3d_data().then(res =>{
                this.btnLoading = false
                this.getList();
            })
            //setTimeout(()=>{this.btnLoading = false},2000)
        }
    }
}
</script>

<style lang="scss" scoped>
    .public_head {
            ul {
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                padding: 30px 50px 10px 84px;
                box-sizing: border-box;
                margin: 0;
                li {
                    display: flex;
                    width: 50%;
                    margin-bottom: 20px;
                    align-items: center;
                    p {
                        width: 120px;
                        span {
                            color: #ff0000;
                        }
                    }
                    .headInput {
                        width: 400px;
                    }
                }
            }
        }
    .topscbox{
        display: flex;
        padding: 0 0 10px 0;
        .scinput{
            flex: 1;
        }
        .tongbu{
            padding: 0 0 0 10px;
        }
    }
    .yultp{
        display: block;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        cursor: pointer;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
</style>
<style>
    .tongbu .el-button{
        height: 36px;
    }
</style>